<template>
	<view class="task-center">
		<view class="swiper-container">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" duration="500"
				indicator-active-color="#000">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<image class="swiper-image" :src="item" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>

		<view class="header">
			<text class="title">任务中心</text>
		</view>

		<view class="section">
			<u-collapse>
				<u-collapse-item :title="item.title" name="Docs guide" v-for="item in list" :key="item.id">
					<u-cell v-for="it in item.paperItems" :key="it.examPaperAnswerId">
						<view slot="title" class="u-slot-title">
							<text class="u-cell-text">{{it.examPaperName}}</text>
							<u-tag text="完成" v-if="it.status == 2" plain size="mini" type="success"></u-tag>
							<u-tag text="待批改" v-else-if="it.status === 1" plain size="mini" type="warning"></u-tag>
						</view>
					</u-cell>
				</u-collapse-item>
			</u-collapse>
		</view>

		<view class="header">
			<text class="title">固定试卷</text>
		</view>

		<view class="section">
			<u-collapse>
				<u-collapse-item :title="item.name" name="Docs guide" v-for="item in list1" :key="item.id">
					<!-- 修复布局问题 -->
					<view class="fixed-paper-cell" >
						<text class="u-cell-text">{{item.name}}</text>
						<u-button type="warning" size="mini" class="action-btn" @click="fn(item.id)">做题</u-button>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		
		
		<view class="header">
			<text class="title">时段试卷</text>
		</view>
		
		<view class="section">
			<u-collapse>
				<u-collapse-item :title="item.name" name="Docs guide" v-for="item in list2" :key="item.id">
					<!-- 修复布局问题 -->
					<view class="fixed-paper-cell">
						<text class="u-cell-text">{{item.name}}</text>
						<u-button type="warning" size="mini" class="action-btn" @click="fn(item.id)">做题</u-button>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import http from "../../http.js"
	export default {
		data() {
			return {
				banners: [
					'/static/banner1.png',
					'/static/banner2.png',
					'/static/banner3.png'
				],
				list: [],
				list1: [],
				list2:[]
			}
		},
		onLoad() {
			this.getlist1(),
				this.getlist2()
		},
		methods: {
			getlist1() {
				http({
					url: "/api/student/dashboard/task",
					method: "post",
				}).then(res => {
					console.log(res);
					if (res.code === 1) {
						this.list = res.response
						console.log(this.list);
					}
				})
			},
			getlist2() {
				http({
					url: "/api/student/dashboard/index",
					method: "post"
				}).then(res => {
					console.log(res);
					this.list1 = res.response.fixedPaper
					this.list2 = res.response.timeLimitPaper
					console.log(this.list1);
					console.log(this.list2);
				})
			},
			fn(id){
				uni.navigateTo({
					url:`/pages/exam/exam?paperId=${id}`
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;

	}

	/* #ifdef MP-WEIXIN */
	.fixed-paper-cell {
		padding: 20rpx 24rpx;
	}

	.u-cell-text {
		font-size: 28rpx;
	}

	.action-btn {
		width: 120rpx !important;
		font-size: 24rpx !important;
	}

	/* #endif */
	/* 修复小程序布局问题 */
	.fixed-paper-cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx 30rpx;
	}

	.u-cell-text {
		flex: 1;
		min-width: 0;
		/* 重要：解决flex布局溢出问题 */
		font-size: 30rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 20rpx;
	}

	.action-btn {
		flex-shrink: 0;
		/* 禁止按钮缩小 */
		width: 140rpx !important;
		height: 56rpx !important;
		line-height: 56rpx !important;
		padding: 0 16rpx !important;
		border-radius: 8rpx !important;
	}

	.u-slot-title {
		display: flex;
		justify-content: space-between;
	}

	/* 轮播图样式 */
	.swiper-container {

		height: 300rpx;

	}

	.swiper {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		display: block;
	}

	/* 其他样式保持不变 */
	.task-center {
		display: block;
		
		background-color: #f5f5f5;
		height: auto;
		min-height: 100%;
		padding-bottom: 20rpx;
	}

	.header {
		padding: 20rpx 50rpx;
		background-color: #f5f5f5;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: black;
	}

	.section {
		background-color: white;
		height: auto;
		overflow: visible;
	}

	.section-title {
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.uni-list {
		margin-top: 0;
	}

	.uni-list-item {
		padding: 25rpx 30rpx;
	}

	.uni-list-item__container-title {
		font-size: 30rpx !important;
		color: #333 !important;
	}
</style>